{"componentChunkName":"component---src-templates-studio-page-js","path":"/studio/app_widgets","webpackCompilationHash":"c021816e17e59e08b77b","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"fields":{"title":"🍱 小部件 Widgets","noFooter":false,"description":"小部件是规定了普适的UI框能力🍱，网格布局还要紧凑的信息和功能，整齐又有趣。","date":"2021-11-03","author":"Ubug","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='458'%3e%3cpath%20d='M0%20229v229h401V0H0v229m179-19l7%201h1l6-1h6v13l1%2013h-27v-6l1-6v-1l-1-7v-5l-1%2027c0%2025%200%2026%202%2027h53l-13-1h-13v-26h26v13l1%2013c2-1%201-52%200-54l-28-1-21%201m22%2013v13h27l-1-13v-12l-13-1h-13v13m-21-7l-3%205c-1%204-1%206%201%204%201-1%201-1%201%203l1%207%201-5c0-4%200-6%202-6%201-1%201%201-1%205-1%203%202%201%204-2l2-3v4c0%203%200%204-2%204v2c3%202%204%201%205-5l1-5%201%203%203%204c2%200%201-3-1-6-2-2-2-2%200-4%203-3%202-4-3-3-5%200-5%200-5-2%201-3-1-3-2%201l-3%204c-1%202-1%202-1%200l1-4c2-2%202-3%200-3-1-1-1%200-2%202m28-2l-1%202-1%202c-2%200-3%202-1%202v3c-1%203-1%203%201%205l2%201-3%203c-3%203-2%204%202%201%202-2%202-2%203-1%203%202%204%200%202-2-2-3-1-5%203-5%202%200%202%200%202%204l-1%203c-3%200-2%202%200%202%202%201%204-2%204-6-1-3%200-3%202-3l3-1c1-1-1-2-4-1-2%200-2%200-1-2l2-3c3-2%202-3-3-3l-6%201%204%201c3%200%203%200%202%202l-2%203-2%201c-2%200-3%200-2-2%200-2%200-3-2-3-1%200-2-1-1-2%200-3-1-4-2-2m-91%2012c-12%206-9%2023%204%2023s17-18%204-23h-8m220%205c-2%201-3%202-3%2010%200%2010%200%2011%2010%2011%209%200%2010-1%2010-11l-1-9c-3-2-13-2-16-1m21%202c-3%203-3%2013%200%2017%202%203%2016%203%2018%200%202-2%202-16%200-18-4-2-16-1-18%201m-185%2018l1%2013h26l-1-13v-13h-26v13m12-7l-1%204c-1%200-2-1-2-3l-1-3c-1%200-2%201-2%203s0%203-2%203v1h1l1%206v7h9l9-1-8-1h-7v-5c0-7%202-8%203-1%200%204%201%205%202%203l3-1c3%201%203%201%203-3%200-3%200-4%202-4%201%200%202%200%201-1l-2-1c-1%201-1%200-1-2%201-2%200-3-1-3l-1%203c0%202%200%203-2%203s-2-1-2-3l-1-4-1%203m22%203v6l-1%202c-3%202-1%203%202%201h2c0%202-2%205-4%205l-1%202c2%201%206-3%207-7%202-6%204-5%204%202%200%206%202%207%203%201%200-4%200-4%202-3s4%201%204-1l-3-2c-2%200-3%200-2-1%202%200%202-1%202-4%200-6%200-5-8-5h-7v4m122%2044c-4%202-4%204-4%2034v30l2%203%203%202h59l3-2%202-3v-30c0-28%200-30-2-32l-2-2-29-1-32%201m-161%203c-2%202-2%204-2%2017%200%2015%200%2015%205%2014l1%201-3%201c-2%200-2%200-2%204v3l-1%209c0%209%202%2015%205%2016a1673%201673%200%2000140-1c3-2%204-7%202-8l-2-2h2c2%202%202-51-1-55l-1-2H170l-2%203m179%207c-5%204-3%2014%202%2014%204%200%206-3%206-8%200-6-4-9-8-6M20%20325a737%20737%200%20013%202c0%201%201%201%202-1%202-2%202-2%201%200l1%202%201-1h1c1%201%204%201%205-1h1c1%202%2012%202%2012%200l1-2H33l-7-1c-6%200-6%200-6%202m72%2054c-5%201-5%202-5%2034%200%2029%200%2030%202%2032%203%203%20139%203%20143%200l3-2v-30c0-30-1-30-3-32l-2-2-68-1-70%201m156%201c-2%202-2%203-2%2025%200%2011%200%2011%202%2011h1l-1%201c-2%200-2%201-2%205s0%205%201%204%207%202%207%204c-1%202%201%203%204%203l5%201%202%201%202%202%201%201v6c-1%201-2%201-3-1h-2l-1%202-1%201%2024%201c22%200%2025%200%2027-2%202-1%202-3%202-28%200-37%200-35-2-37-4-3-61-3-64%200m82%204v8l1%206h58v-13l-1-2h-29l-29%201m-3%2040c-2%202-2%204-2%2011%200%2013-2%2012%2035%2012%2036%200%2034%201%2034-12%200-14%202-13-34-13-31%200-31%200-33%202'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":0.8738019169329073,"src":"/static/ae560afac4d8b15f2ba4a70a4c5f115b/fbb15/widgets.png","srcSet":"/static/ae560afac4d8b15f2ba4a70a4c5f115b/82675/widgets.png 500w,\n/static/ae560afac4d8b15f2ba4a70a4c5f115b/fef60/widgets.png 1000w,\n/static/ae560afac4d8b15f2ba4a70a4c5f115b/fbb15/widgets.png 1094w","srcWebp":"/static/ae560afac4d8b15f2ba4a70a4c5f115b/f71dc/widgets.webp","srcSetWebp":"/static/ae560afac4d8b15f2ba4a70a4c5f115b/7fe04/widgets.webp 500w,\n/static/ae560afac4d8b15f2ba4a70a4c5f115b/d619e/widgets.webp 1000w,\n/static/ae560afac4d8b15f2ba4a70a4c5f115b/f71dc/widgets.webp 1094w","sizes":"(max-width: 1094px) 100vw, 1094px"}}},"noGlobalStyles":false,"bannerCredit":null,"slug":"/studio/app_widgets","tags":["talking"]},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"app_widgets\",\n  \"title\": \"🍱 小部件 Widgets\",\n  \"tech\": \"other\",\n  \"date\": \"2021-11-03 16:34:10\",\n  \"description\": \"小部件是规定了普适的UI框能力🍱，网格布局还要紧凑的信息和功能，整齐又有趣。\",\n  \"titleColor\": \"#fff\",\n  \"btnStyle\": \"darkBlue\",\n  \"tags\": [\"talking\"],\n  \"banner\": \"../studios/widgets.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"\\u9884\\u89C8\\u53EF\\u4EE5\\u5230 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.ubug.io/widgets\"\n  }, \"\\u5C0F\\u90E8\\u4EF6 Widgets\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"1753b377-af77-5e94-aaca-21a3e754e2ea","prev":{"fileAbsolutePath":"D:/ubug/storybook/content/studio/common/img_flow.md","id":"ccf05d7c-8ca7-59d2-b4e1-1fe4c51fe20b","parent":{"name":"img_flow","sourceInstanceName":"studio"},"excerpt":"预览可以到  图片处理工作流","fields":{"title":"🌄 图片处理工作流","slug":"/studio/img_flow","description":"前端图片流，给定一个处理流程，然后按照流程处理图片，目前可以做批量切图、重命名和压缩。","date":"2021-12-03","redirects":null,"datetime":"2021-12-03 16:34:10","categories":[],"series":null,"tags":["talking"],"status":"online"},"frontmatter":{"published":null,"tags":["talking"],"theme":null,"slug":"img_flow","date":"2021-12-03 16:34:10"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"img_flow\",\n  \"title\": \"🌄 图片处理工作流\",\n  \"tech\": \"other\",\n  \"date\": \"2021-12-03 16:34:10\",\n  \"description\": \"前端图片流，给定一个处理流程，然后按照流程处理图片，目前可以做批量切图、重命名和压缩。\",\n  \"titleColor\": \"#fff\",\n  \"btnStyle\": \"darkBlue\",\n  \"tags\": [\"talking\"],\n  \"banner\": \"../studios/img_flow.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"\\u9884\\u89C8\\u53EF\\u4EE5\\u5230 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.ubug.io/img_flow\"\n  }, \"\\u56FE\\u7247\\u5904\\u7406\\u5DE5\\u4F5C\\u6D41\")));\n}\n;\nMDXContent.isMDXComponent = true;"},"next":{"fileAbsolutePath":"D:/ubug/storybook/content/studio/common/rocket.md","id":"b5ec66f8-b7e3-58ca-b834-10ab7861d20c","parent":{"name":"rocket","sourceInstanceName":"studio"},"excerpt":"预览可以到  火箭着陆","fields":{"title":"🚀 火箭着陆","slug":"/studio/rocket","description":"Threejs + Cannonjs 实现的一个3D火箭自动着陆，火箭发射，LowPoly 风格画面。","date":"2021-10-03","redirects":null,"datetime":"2021-10-03 16:34:10","categories":[],"series":null,"tags":["talking"],"status":"online"},"frontmatter":{"published":null,"tags":["talking"],"theme":null,"slug":"rocket","date":"2021-10-03 16:34:10"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"rocket\",\n  \"title\": \"🚀 火箭着陆\",\n  \"tech\": \"other\",\n  \"date\": \"2021-10-03 16:34:10\",\n  \"description\": \"Threejs + Cannonjs 实现的一个3D火箭自动着陆，火箭发射，LowPoly 风格画面。\",\n  \"titleColor\": \"#774934\",\n  \"btnStyle\": \"darkBlue\",\n  \"tags\": [\"talking\"],\n  \"banner\": \"../studios/rocket.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"\\u9884\\u89C8\\u53EF\\u4EE5\\u5230 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.ubug.io/rocket\"\n  }, \"\\u706B\\u7BAD\\u7740\\u9646\")));\n}\n;\nMDXContent.isMDXComponent = true;"}}}}